<template>
  <div>
    <!--导航-->
    <div style="padding-top: 20px">
      <div class="breadcrumb" v-show="checkout">
        <span @click="text = true,result = false,checkout = true,consequence = false"><Icon
          type="logo-buffer" size="16"></Icon> {{data.navigationTwo}} </span>
      </div>
      <div class="breadcrumb" v-show="consequence">
        <span style="margin: 0 5px">\</span>
        <span><Icon type="ios-cafe" size="16"></Icon> {{data.navigationThree}} </span>
      </div>
    </div>
    <!--填写-->
    <div v-show="text">
      <!--文献格式校验-->
      <div v-if="data.navigationOne =='文献格式校验'">
        <div class="textbox">
          <Input v-model="value" class="input" type="textarea" :rows="15" placeholder="请将校验内容粘贴至这里！"/>
        </div>
        <div class="button">
          <Button type="info" @click="toExamine1">{{data.toExamine}}</Button>
        </div>
      </div>
      <!--错别字校对-->
      <div v-if="data.navigationOne =='错别字校对'">
        <div class="textbox">
          <Input v-model="value1" class="input" type="textarea" :rows="15" placeholder="请将校验内容粘贴至这里！"/>
        </div>
        <div class="button">
          <Button type="info" @click="toExamine2">{{data.toExamine}}</Button>
        </div>
      </div>
      <!--稿件创新指数-->
      <div v-if="data.navigationOne =='稿件创新指数'">
        <div class="textbox">
          <span>题目：</span><Input v-model="list.title" class="input" placeholder="标题"/>
          <span>关键词：</span><Input v-model="list.keywords" class="input" placeholder="关键字"/>
          <span>摘要：</span><Input v-model="list.summary" class="input" type="textarea" :rows="15"
                                 placeholder="请将校验内容粘贴至这里！"/>
        </div>
        <div class="button">
          <Button type="info" @click="toExamine3">{{data.toExamine}}</Button>
        </div>
      </div>
    </div>
    <!--结果-->
    <div v-show="result">
      <!--文献格式校验-->
      <div class="results" v-if="data.navigationOne =='文献格式校验'">
        <Row :gutter="16">
          <i-col span="12">
            <div class="verify" style="margin-bottom: 10px">校验内容:</div>
            <Input v-model="value" type="textarea" :rows="10" placeholder=""/>
          </i-col>
          <i-col span="10" offset="2">
            <div class="verify" style="margin-bottom: 10px">校验结果:</div>
            <div v-for="Value in returnValue" style="margin-bottom: 12px">
              <div v-if='Value.state == "false"'>
                <p style="margin-right: 5px">
                  <span><Icon type="md-close" color="red" size="16"/></span>
                  <span>{{Value.text}}</span>
                </p>
                <p style="margin-top: 3px">错误提示：
                  <span style="display: block" v-for="error in Value.error">{{error}}</span>
                </p>
              </div>
              <div v-else>
                <p style="margin-right: 5px">
                  <span><Icon type="md-checkmark" color="green" size="16"/></span>
                  <span>{{Value.text}}</span>
                </p>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
      <!--错别字校对-->
      <div class="results" v-if="data.navigationOne =='错别字校对'">
        <Row :gutter="16">
          <i-col span="24">
            <span v-html="value1" style="font-weight: bold;font-size: 14px;margin: 0 50px;display: inline-block"></span>
          </i-col>
        </Row>
      </div>
      <!--稿件创新指数-->
      <div class="results" v-if="data.navigationOne =='稿件创新指数'">
        <Row :gutter="16">
          <i-col span="6">
            <gauge v-if="gauge" :gauge="gauge"></gauge>
          </i-col>
          <i-col span="9">
            <radar v-if="score.length > 0" :score="score"></radar>
          </i-col>
          <i-col span="9">
            <div class="giveAmark" style="padding-top: 50px">
              <span style="">标题：</span>
              <Rate disabled :count="8" v-model="headlineGrade"/>
            </div>
            <div class="giveAmark">
              <span>关键字：</span>
              <Rate disabled :count="8" v-model="keywordGrade"/>
            </div>
            <div class="giveAmark">
              <span>摘要：</span>
              <Rate disabled :count="8" v-model="digestGrade"/>
            </div>
          </i-col>
        </Row>

        <div class="giveAmark article" style="padding: 10px;background: #dbf2fb">创新度相似的文章：</div>
        <div class="article" v-for="headline in headline">
          <p><span class="bold">标题：</span>{{headline[0].title}}</p>
          <p><span class="bold">关键字：</span>{{headline[0].keywords}}</p>
          <p><span class="bold">摘要：</span>{{headline[0].summary}}</p>
        </div>
        <div class="article" v-for="keyword in keyword">
          <p><span class="bold">标题：</span>{{keyword[0].title}}</p>
          <p><span class="bold">关键字：</span>{{keyword[0].keywords}}</p>
          <p><span class="bold">摘要：</span>{{keyword[0].summary}}</p>
        </div>
        <div class="article" v-for="digest in digest">
          <p><span class="bold">标题：</span>{{digest[0].title}}</p>
          <p><span class="bold">关键字：</span>{{digest[0].keywords}}</p>
          <p><span class="bold">摘要：</span>{{digest[0].summary}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import radar from '../module/radar';
  import gauge from '../module/gauge';

  export default {
    components: {radar, gauge},
    props: {
      data: {
        type: Object,
      },
    },
    data() {
      return {
        /*显示隐藏*/
        text: true,
        result: false,
        /*导航显示隐藏*/
        checkout: true,
        consequence: false,
        /*文本*/
        value: '[1] 余敏.出版集体研究[M].北京：中国书籍出版社,2001：179-193.\n' +
        '[2] 中国地质学会.地质论评[J].1936，1(1)-.北京：地质出版社，1936-.\n' +
        '[3] 李晓东，张庆红，叶瑾琳.气候研究的若干理论问题[J].北京大学学报：自然科学版,1999，35(1)：101-106.\n' +
        '[4] 程根伟.1998年长江洪水的成因与减灾对策[M ].∥许厚泽，赵其国.长江流域洪涝灾害与科技对策.北京：科学出版社，1999：32-26.',
        value1: '2019年上半年收灌在即。当全球目光投向即将启木的二十国集团领导人大阪峰会时，中美经贸摩擦升级背景下的中国经济走向无疑北受瞩目。',
        /*结果*/
        returnValue: '',
        /*稿件创新指数*/
        score: [],
        gauge: 0,
        headline: {},
        headlineGrade: 0,
        keyword: {},
        keywordGrade: 0,
        digest: {},
        digestGrade: 0,

        list: {
          title: '卵巢囊肿合并糖尿病患者临床针对性护理效果分析',
          keywords: '卵巢囊肿合并糖尿病 针对性护理 常规护理 空腹血糖指数 生活质量 护理满意度',
          summary: '目的 研究卵巢囊肿合并糖尿病患者应用针对性护理的效果与价值.方法 2017年2月至2018年2月,本院共收治136例卵巢囊肿合并糖尿病患者,按照入院时间将患者分为两组,对照组68例应用常规护理,观察组68例应用针对性护理,比较两组卵巢囊肿合并糖尿病患者的空腹血糖指数、生活质量评分与护理满意度.结果 两组卵巢囊肿合并糖尿病患者的护理前的空腹血糖指数、生活质量评分对比,无差异(P＞0.05).实施护理后,两组患者的空腹血糖指数与生活质量评分均有所改善,观察组改善情况优于对照组,差异显著(P＜0.05).观察组的护理满意度显著高于对照组,差异显著(P＜0.05).结论 针对性护理能够改善卵巢囊肿合并糖尿病患者的生活质量,辅助临床治疗,值得在临床推广.',
        }

      }
    },
    methods: {
      incept() {
        this.text = true;
        this.result = false;
        this.checkout = true;
      },
      /*文献格式校验*/
      toExamine1() {
        if (this.value) {
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(this.value),
            url: this.$api.url + this.data.port,
          }).then((res) => {
            if (res.data.code == 200) {
              this.returnValue = res.data.data;
              this.consequence = true;
              this.text = false;
              this.result = true;
            }
          })
        }
      },
      /*错别字校对*/
      toExamine2() {
        if (this.value1) {
          let data = {
            param: this.value1
          };
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(data),
            url: this.$api.url + this.data.port,
          }).then((res) => {
            if (res.data.code == 200) {
              this.consequence = true;
              this.text = false;
              this.result = true;
              for (let a of res.data.data) {
                if (this.value1.indexOf(a[0]) != -1) {
                  let values = this.value1.split(a[0]);
                  this.value1 = values.join('<font  style="color:#FF3300">' + a[0] + '</font >');
                }
              }
            }
          });
        }
      },
      /*稿件创新指数*/
      toExamine3() {
        if (this.list.title) {
          this.$axios({
            method: 'POST',
            headers: {'Content-Type': 'application/json;charset=UTF-8'},
            data: JSON.stringify(this.list),
            url: this.$api.url + this.data.port,
          }).then((res) => {
            if (res.status == 200) {
              this.consequence = true;
              this.text = false;
              this.result = true;
              this.headlineGrade = res.data[0].result;
              this.keywordGrade = res.data[1].result;
              this.digestGrade = res.data[2].result;
              this.gauge = res.data[3];
              for (let a of res.data) {
                this.score.push(a.result);
                if (a.result === 2) {
                  this.headline = a.detail
                }
                if (a.result === 4) {
                  this.keyword = a.detail
                }
                if (a.result === 5) {
                  this.digest = a.detail
                }
              }
            }
          });
        }
      },
    },
  }
</script>

<style scoped>
  .breadcrumb {
    display: inline-block;
  }

  .breadcrumb span {
    font-weight: bold;
    font-size: 15px;
    display: inline-block;
    cursor: pointer;
  }

  /*填写*/
  .textbox {
    padding-top: 20px;
  }

  .input {
    padding-bottom: 10px;
  }

  .button {
    padding: 10px;
    text-align: center;
  }

  /*结果*/
  .results {
    padding-top: 20px;
  }

  .verify {
    font-weight: bold;
    font-size: 15px;
  }

  .giveAmark {
    font-size: 18px;
    font-weight: bold;
  }

  .giveAmark span {
    display: inline-block;
    width: 80px;
  }

  .article {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
  }

  .article .bold {
    font-weight: bold;
  }
</style>
